<div class="editor-container">
  <div class="toolbar-container">
    <div id="toolbar">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-header" value="1"></button>
      <button class="ql-header" value="2"></button>
      <button class="ql-blockquote"></button>
      <button class="ql-code-block"></button>
      <button class="ql-code"></button>
      <button class="ql-list" value="bullet"></button>
      <button class="ql-list" value="ordered"></button>
      <button class="ql-link"></button>
      <button class="ql-image"></button>
    </div>
  </div>
  <div class="article-title">
    <div style="width: 700px; margin: 0 auto; margin-top: 24px; padding-left: 18px; text-align: left;">
      <d-button (click)="deleteText()">插入带格式的文本</d-button>
    </div>
    <input placeholder="输入标题..." spellcheck="false" maxlength="80" rows="1" class="title-input title-input" value="通过Quill API实现对编辑器内容的完全控制" />
  </div>
  <!-- <div id="editor" class="markdown-body">
    <p>DevUI：面向企业中后台的前端开源解决方案</p>
    <h2>宗旨与法则</h2>
    <p>规范的组件化的目的不是为了限制创造，而是为了创造者更确定、科学、高效。所有行为决策的价值归依是产品业务。产品业务永远比组件化本身更重要，业务第一。</p>
    <p>规范不是绝对、教条、冷漠、强制的，实际工作中总会有新增需求、存优化空间、情感化设计需求超出一般通用规范。保持克制的同时，允许基于强烈业务需求的规范突破；之后如果有足够的理由迭代出组件，那么就进行组件深化。</p>
    <h2>设计语言</h2>
    <p>DevUI的价值观奠定了 DevCloud品牌的基础。它是 DevCloud 的设计师们思考、工作的产物，反映了 DevCloud 的产品文化、设计理念和对客户的承诺。DevUI的这些价值观贯穿于所有产品和面向客户的沟通和内容中。同时，它是 DevUI 设计原则的源头，为具体的设计方法提供启发和指引。</p>
    <p>DevUI倡导<code>沉浸</code>、<code>灵活</code>、<code>致简</code>的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。</p>
    <h2>致简</h2>
    <p>DevUI坚持以用户为中心去进行设计，注重直观可达性，把服务示例化以帮助用户快速融入到使用中去。同时， DevUI提供大量的快捷键，简化使用的流程、提高操作效率。</p>
    <h2>沉浸</h2>
    <p>DevUI的沉浸式体验包括人的感官体验和认知体验，当用户的个人技能与面对的挑战互相匹配，并且长时间处在稳定状态时，用户达到心流状态并且不易被外界因素所干扰。</p>
    <p>在产品设计中，DevUI专注在降低用户在完成任务目标时的认知阻力中。为此，DevUI同时提供多种不同的切换页面的途径，包括面包屑、快捷键、按钮和链接等，方便用户随时快速、连续地切换页面，到达自己所需的页面，使用户处于流畅的体验中，减轻寻找信息的焦虑感。</p>
    <h2>灵活</h2>
    <p>DevUI提供超过60个独立原子级组件，可以自由组合，像搭积木一样，用小组件搭建出符合自身产品需要的分子级组件，进而搭建出自己的业务系统。</p>
  </div> -->
  <div id="editor" class="markdown-body">
    <p><a href="https://juejin.cn/post/6976023288753586184" rel="noopener noreferrer" target="_blank">上一篇</a>文章我们介绍了Quill的基本使用和配置，相信大家能够使用Quill搭建一个简单的富文本编辑器啦。</p><p>不过实际的业务场景可能更复杂，有更多定制的需求，Quill能否满足呢？</p><p>Quill是一款API驱动的富文本编辑器，它的内容可以通过API实现完全的掌控，我们一起来看看吧。</p><p><br></p><h1>对内容的控制</h1><p>富文本编辑器最基本的操作就是对内容的<code>增</code>/<code>删</code>/<code>改</code>/<code>查</code>，比如：</p><ul><li>在编辑器某处增加一些文本</li><li>选中编辑器中的一部分内容，将其删除</li><li>选中一部分文本，给它添加某种格式</li><li>获取其中一部分内容，对其进行转换</li></ul><p>以上操作直接通过键盘和鼠标很容易操作，但是通过API如何实现呢？</p><p><br></p><h2>删</h2><h2>删除内容</h2><p>先看<code>删</code>的部分，通过<code>deleteText()</code>方法实现，该方法主要有两个入参：</p><ul><li>index 从哪儿删除</li><li>length 删除多少内容</li></ul>
    <p>比如我想把下面的<code>Hello </code>删除：</p>
    <pre class="ql-syntax" spellcheck="false">this.quill.deleteText(0, 6);</pre>
    <p><br></p>
  </div>
</div>

<!-- <div class="editor-container">
  <div id="editor">
    <p>DevUI：面向企业中后台的前端开源解决方案</p>
    <h2>宗旨与法则</h2>
    <p>规范的组件化的目的不是为了限制创造，而是为了创造者更确定、科学、高效。所有行为决策的价值归依是产品业务。产品业务永远比组件化本身更重要，业务第一。</p>
    <p>规范不是绝对、教条、冷漠、强制的，实际工作中总会有新增需求、存优化空间、情感化设计需求超出一般通用规范。保持克制的同时，允许基于强烈业务需求的规范突破；之后如果有足够的理由迭代出组件，那么就进行组件深化。</p>
    <h2>设计语言</h2>
    <p>DevUI的价值观奠定了 DevCloud品牌的基础。它是 DevCloud 的设计师们思考、工作的产物，反映了 DevCloud 的产品文化、设计理念和对客户的承诺。DevUI的这些价值观贯穿于所有产品和面向客户的沟通和内容中。同时，它是 DevUI 设计原则的源头，为具体的设计方法提供启发和指引。</p>
    <p>DevUI倡导<code>沉浸</code>、<code>灵活</code>、<code>致简</code>的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。</p>
    <h2>致简</h2>
    <p>DevUI坚持以用户为中心去进行设计，注重直观可达性，把服务示例化以帮助用户快速融入到使用中去。同时， DevUI提供大量的快捷键，简化使用的流程、提高操作效率。</p>
    <h2>沉浸</h2>
    <p>DevUI的沉浸式体验包括人的感官体验和认知体验，当用户的个人技能与面对的挑战互相匹配，并且长时间处在稳定状态时，用户达到心流状态并且不易被外界因素所干扰。</p>
    <p>在产品设计中，DevUI专注在降低用户在完成任务目标时的认知阻力中。为此，DevUI同时提供多种不同的切换页面的途径，包括面包屑、快捷键、按钮和链接等，方便用户随时快速、连续地切换页面，到达自己所需的页面，使用户处于流畅的体验中，减轻寻找信息的焦虑感。</p>
    <h2>灵活</h2>
    <p>DevUI提供超过60个独立原子级组件，可以自由组合，像搭积木一样，用小组件搭建出符合自身产品需要的分子级组件，进而搭建出自己的业务系统。</p>
  </div>
  <div class="operation-bar">
    <d-button>评论</d-button>
  </div>
</div> -->

<!-- <d-button bsStyle="text" (click)="format()">format()</d-button>
<d-button bsStyle="text" (click)="updateContents()">updateContents()</d-button> -->

<!-- <nav *ngIf="false">
  <p><a [routerLink]="['/']">Home</a></p>
  <p><a [routerLink]="['/list']">List</a></p>
  <p><a [routerLink]="['/detail']">Detail</a></p>
</nav>

<div>
  <d-button (click)="prevPage()">上一页</d-button>
  <d-button (click)="nextPage()">下一页</d-button>
</div>

<canvas id="canvas-pdf"></canvas>

<div id="pdf-page-container"></div> -->

<!-- <iframe id="pdf-container" width="1000" height="600"></iframe> -->

<!-- <div class="chart-pie" style="width: 600px;height:400px;"></div> -->

<!-- <div class="jsmind-container"></div> -->

<!-- <d-button
  dPopover 
  [content]="customTemplate" 
  position="bottom" 
  [controlled]="true"
  [popoverStyle]="{ backgroundColor: 'white', color: 'black' }"
>确定</d-button>

<d-button icon="icon-add" bsStyle="text-dark" title="add"></d-button>

<d-button
  bsStyle="primary"
  (click)="loadComponent('text-dark')"
>text-dark</d-button>

<d-button
  bsStyle="primary"
  (click)="loadComponent('primary')"
>primary</d-button>

<d-button
  bsStyle="common"
  (click)="loadComponent('common')"
>common</d-button>

<ng-template #customTemplate>
  <h1>Custom Tips</h1>
  <h4>This is a custom tip.</h4>
</ng-template>

<ng-template #container></ng-template> -->

<router-outlet></router-outlet>